
<h2>Invoke transaction</h2>

<form name="form" novalidate>

  <div class="form-group">
    <label>Channel</label>
    <select ng-model="selectedChannel" material-select watch ng-options="o.channel_id for o in ctl.channels" placeholder="Channel ID" required>
    </select>
  </div>

  <div class="form-group">
    <label>Chaincode</label>
    <select ng-model="selectedCc" material-select watch ng-options="o.name+' ('+o.version+')' for o in ctl.chaincodes" placeholder="Contract ID" required>
    </select>
  </div>

  <div class="form-group">
    <label>Peers</label>
    <select ng-model="selectedPeers" multiple material-select watch ng-options="o.org+'/'+o.id as '('+o.org+') '+o['server-hostname'] for o in ctl.getPeers()" placeholder="Peers" required>
      <option value="" disabled selected>Select peer(s)</option>
    </select>
  </div>

  <div class="form-group">
    <label for="fcn" class="col-sm-2 control-label">Function name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="fcn" placeholder="Function name" ng-model="fcn" required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-field col s12 invalid">
      <textarea id="ccarguments" name="ccarguments"
        class="materialize-textarea" ng-class="{invalid:form.ccarguments.$invalid}"
        ng-model="args" validate-json></textarea>
      <label for="ccarguments">Function arguments (json)</label>
    </div>
    <div data-error="Invalid json" ng-class="{transparent:!form.ccarguments.$error.json}"></div>
  </div>

</form>

<!-- invoke -->
<div ng-hide="ctl.invokeInProgress">
  <!-- query -->
  <div class="row">
    <button class="btn btn-primary col s2" type="button" ng-click="ctl.invoke(selectedChannel, selectedCc, selectedPeers, fcn, args)" ng-disabled="form.$invalid">Invoke</button>
    <button class="btn btn-flat col s3" type="button" ng-click="fcn='move'; args='[&quot;a&quot;, &quot;b&quot;,&quot;10&quot;]'">Fill with sample invoke</button>
  </div>
  <br>
  <!-- history -->
  <div class="row">
    <button class="btn btn-primary col s2" type="button" ng-click="ctl.query(selectedChannel, selectedCc, selectedPeers[0], fcn, args)" ng-disabled="form.$invalid">Query</button>
    <button class="btn btn-flat col s3" type="button" ng-click="fcn='query'; args='[&quot;a&quot;]'">Fill with sample query</button>
  </div>
  <br>
  <div class="row" ng-hide="ctl.invokeInProgress || !ctl.params.history.length">
    <div class="col s2">
      <select ng-model="params.current" material-select watch
              ng-options="o.fcn + ' ' + o.args for o in ctl.params.history">
      </select>
    </div>

    <button class="btn btn-flat col s3" type="button" ng-click="fcn=params.current.fcn; args=params.current.args">Fill with params</button>
  </div>
</div>

<div class="progress" ng-show="ctl.invokeInProgress">
    <div class="indeterminate"></div>
</div>

<!-- error (if any) -->
<div class="error" ng-show="ctl.error">
  <h2>Error</h2>
  <json-formatter open="2" json="ctl.error"></json-formatter>
</div>

<!-- transaction view -->
<div ng-show="ctl.transaction">


  <h2>Last transaction</h2>
  <div class="row">
    <div class="col s12">
      <ul class="tabs" tabs>
        <li class="tab col s3"><a class="active" href="#tab-result">Result</a></li>
        <li class="tab col s3"><a href="#tab-info">Info</a></li>
        <li class="tab col s3"><a href="#tab-json">Json</a></li>
      </ul>
    </div>
    <div id="tab-result" class="col s12">
      <!-- <json-formatter open="1" json="ctl.transaction.transactionEnvelope.payload.data.actions[0].payload.action.proposal_response_payload.extension.results.ns_rwset"></json-formatter> -->
      <json-formatter open="2" json="ctl.result"></json-formatter>
    </div>

    <div id="tab-info" class="col s12">
      <p ng-if="!ctl.transaction.transactionEnvelope"><i>No transaction</i></p>

      <certificate title="Transaction creator" data="ctl.transaction.transactionEnvelope.payload.data.actions[0].header.creator.IdBytes"></certificate>

      <div ng-repeat="e in ctl.transaction.transactionEnvelope.payload.data.actions[0].payload.action.endorsements">
        <certificate title="Endorser" data="e.endorser.IdBytes"></certificate>
        <!-- <json-formatter open="1" json="e.endorser"></json-formatter> -->
      </div>

      <!-- ctl.transaction.transactionEnvelope.payload.data.actions[0].payload.action.proposal_response_payload.extension.results.ns_rwset[].rwset.writes[](key|value|is_delete) -->
    </div>

    <div id="tab-json" class="col s12">
      <json-formatter open="1" json="ctl.transaction"></json-formatter>
    </div>

  </div>
</div>

<div style="height: 200px"></div>